<template>
  <!--  发送短信验证码 公用组件 -->
  <div>
    <el-col :span="16">
      <el-input placeholder="短信验证码" v-model.trim="newSmsCode" autocomplete="off" clearable></el-input>
    </el-col>
    <el-col :span="8" class="t-r">
      <el-button type="primary" class="ml20 wd85" plain @click.native="sendSmsCode">{{ smsBtnTxt }}</el-button>
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    smsCode: {
      type: String,
      default: ''
    },
    phoneNo: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      canSend: true,
      smsBtnTxt: '发送验证码'
    }
  },
  components: {},
  created () {
  },
  computed: {
    newSmsCode: {
      get () {
        return this.smsCode
      },
      set (val) {
        this.$emit('updated', val)
      }
    }
  },
  methods: {
    checkPhoneNo (phoneNo) {
      if (phoneNo == null || phoneNo === '') {
        this.$message.error('请输入手机号')
        return
      }
      var reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
      if (reg.test(phoneNo)) {
        return true
      } else {
        this.$message.error('请输入正确的手机号')
        return false
      }
    },
    sendSmsCode () {
      if (!this.checkPhoneNo(this.phoneNo)) return
      if (!this.canSend) {
        return
      }
      this.smsBtnTxt = '60秒后重发'
      let time = 60
      this.canSend = false
      this.timer = setInterval(() => {
        if (time === 0) {
          clearInterval(this.timer)
          this.smsBtnTxt = '重新发送'
          this.canSend = true
        } else {
          time--
          this.smsBtnTxt = `${time}秒后重发`
        }
      }, 1000)
      this.$emit('getSmsId', '324234')
    }
  }
}
</script>

<style lang="less" scoped>
  .wd85{
    width: 85%;
  }
</style>